    @import '../../assets/stylus/mixin';
    .home-page
        font:400 .38rem "Helvetica Neue","Microsoft Yahei",sans-serif
    .head
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 1.17rem;
        background: #3199e8;
        color: #fff;
        line-height: 1.17rem;
        font-size: .34rem;
        .eleme
            ct();
            left:.26rem;
        .head-login
            ct();
            right:.26rem;
    .geo-wrap
        padding-top: 1.17rem;
        overflow: hidden;
        transition: max-height .3s ease;
        max-height: 10rem;
        font:100%/1.5 "Helvetica Neue","Microsoft Yahei",sans-serif
        .geo-guess
            background: #fffeea;
            padding: .26rem;
            border-bottom: 1px solid #ddd;
            font-size: .38rem;
            color: #333;
            span
                color: #ff6000;
                font-weight: 700;
    .location-wrap
        margin-top: .26rem;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        background: #fff;
        font:400 .38rem "Helvetica Neue","Microsoft Yahei",sans-serif
        .location-tip
            padding:.26rem;
            border-bottom: 1px solid #eee;
            color: #666;
            display:flex;
            justify-content: space-between;
            align-items: center;
            span
                &:last-child
                    color:#999;
                    font-size: .3rem;
        .location-city
            padding:.26rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            span
                color: #08c;
                font-size:.54rem;
                font-weight:700;
            .arrow-right
                arrow-right();
                &:after 
                    height: 0.3rem;
                    width: 0.3rem;
                    color: #ddd;
                    border-width: 4px 4px 0 0;
                    border-color: #ddd;
    .hot-city-wrap
        margin-top: 0.26rem;
        border-top: 1px solid #ddd;
        border-bottom: 2px solid #ddd;
        background: #fff;
        position: relative;
        border-bottom: none;
    .city-title
        padding:.26rem;
        color: #666;
        border-bottom: 2px solid #eee;
        font:400 .38rem "Helvetica Neue","Microsoft Yahei",sans-serif
        small
            color: #999;
            font-size: .32rem;
    .hot-city
        span 
            float: left;
            width: 25%;
            height: 2.8em;
            border-bottom: 2px solid #eee;
            border-right: 2px solid #eee;
            text-align: center;
            line-height: 2.8;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #08c;
            font-weight:500;
            font-size: .44rem;
            &:nth-child(4n)
                border-right: none;
    .group-city
        span 
            float: left;
            width: 25%;
            height: 2.8em;
            border-bottom: 2px solid #eee;
            border-right: 2px solid #eee;
            text-align: center;
            line-height: 2.8;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #555;
            font-weight:500;
            font-size: .44rem;
            &:nth-child(4n)
                border-right: none;
    .group-city-wrap
        .group-city-table
            .group-city-table-cell
                margin-top: 0.26rem;
                border-top: 1px solid #ddd;
                border-bottom: 2px solid #ddd;
                background: #fff;
                position: relative;
                border-bottom: none; 